<template>

  <div>
    <component-details v-show="tabsActive==0" ref="componentDetail" eventId="componentDetail" :contentInfo="contentInfo" formFlag="1">
      <div class="flex tabbar" slot="tabbar">
        <el-tabs v-model="tabsActive">
          <el-tab-pane label="商品详情" name="0"> </el-tab-pane>
          <el-tab-pane label="助播素材" name="1" v-if="fromListPage == 30 && enterpriseConfig.anchorSelectionAuthority == '1'"> </el-tab-pane>
        </el-tabs>
      </div>
    </component-details>
    <component-details v-show="tabsActive==1" ref="componentAnchorDetail" eventId="componentAnchorDetail" :contentInfo="contentInfo" formFlag="1" :showBatchUploadBtn="true" :showRichTextBtn="false" :showVideoBtn="false">
      <div class="flex tabbar" slot="tabbar">
        <el-tabs v-model="tabsActive">
          <el-tab-pane label="商品详情" name="0"> </el-tab-pane>
          <el-tab-pane label="助播素材" name="1" v-if="fromListPage == 30 && enterpriseConfig.anchorSelectionAuthority == '1'"> </el-tab-pane>
        </el-tabs>
      </div>
    </component-details>
  </div>


</template>

<script>
  import componentDetails from '@/components/ComponentTemplate/ComponentDetails'

  export default {
    components: {
      componentDetails
    },
    props: {
      fromListPage: { type: Number, default: 30 }
    },
    data() {
      return {
        activeName: '1',
        tabDisabled: true,
        contentInfo: {
          labelName: '商品详情'
        },
        tabsActive: '0',
        detailsBoolean: false,
        form: {
          sort: 0,
          goodsName: '',
          category: '',
          type: [],
          resource: ''
        },
        // 企业系统配置
        enterpriseConfig: {
          wholesaleAuthority: 0
        },
        rules: {
          goodsName: [
            { required: true, message: '请填写商品名称', trigger: 'blur' }
          ]
        },
        picData: [],
        categoryData: []
      }
    },
    // 初始化页面
    created() {
      this.initEnterpriseConfig()
    },
    mounted() {
      const that = this
      this.$bus.$on('goods.edit.data', function(data) {
        that.$refs.componentDetail.initTemplate(data.detailTemplateId)
        that.$refs.componentAnchorDetail.initTemplate(data.anchorTemplateId)
      })
    },
    methods: {
      // 展示3级任务类型
      showSubCategory(key) {
        this.picData[key].show = true
        const changeData = this.picData[key].show
        this.$delete(this.picData[key], 'show')
        this.$set(this.picData[key], 'show', changeData)
      },
      // 隐藏3级任务类型
      hideSubCategory(key) {
        this.picData[key].show = false
      },
      // 初始化企业系统配置
      initEnterpriseConfig() {
        // 监听info页面的enterpriseConfig信息
        const that = this
        this.$bus.$on('info.enterpriseConfig', function(data) {
          that.enterpriseConfig = data
        })
      },
      // 保存
      saveTemplate() {
        this.$refs.componentAnchorDetail.submit(1, 'ComponentTemplate.bindTemplateId', 'componentAnchorDetail', false)
        this.$refs.componentDetail.submit(1, 'ComponentTemplate.bindTemplateId', 'componentDetail', true)
      }
    }
  }
</script>

<style lang="less" scoped>
  .span-bar{
    padding: 0 50px;
  }
  .remove-btn{
    padding: 7px 6px!important;
  }
  .long-input{
    width: 80%;
  }
  .long-input-2{
    width: 55%;
    margin-right: 5%;
  }
  .long-input-3{
    width: 55%;
  }
  .short-input{
    width: 20%;
  }
  .short-input-2{
    width: 25%;
  }
  .default-input{
    width: 50%;
  }
  .tips{
    color: gray;
    font-size: 12px;
    line-height: 1.2;
    padding-top: 5px;
  }
  .picture{
    width: 130px;
    height: 130px;
    display: block;
  }
  .pic-bar{
    position: relative;
    .close-icon{
      position: absolute;
      right: -30px;
      top: -11px;
      width: 31px;
      height: 40px;
      padding: 0 7px;
      cursor: pointer;
    }
    span{
      position: absolute;
      right: 0;
      bottom: 0;
      width: 100%;
      display: block;
      color: #fff;
      text-align: center;
      padding: 3px 0;
      background: rgba(0,0,0,0.5);
      cursor: pointer;
    }
  }
  .pic-add{
    background: #fff;
    border: #d3d3d3 1px dashed;
    border-radius: 5px;
    padding: 0 45px;
  }
  .tabbar{
    /deep/.el-tabs__nav-wrap::after{
      background-color: unset
    }
    /deep/.el-tabs__item.is-active{
      border-bottom: #409eff 2px solid;
    }
    /deep/.el-tabs__item{
      min-width: 0!important;
      padding: unset!important;
      margin-right: 80px!important;
    }
  }
</style>
